<template>
  <div class="home-book"
       :style="{ margin : (row > 4)?'0 5px 10px 5px':'23px 5px 0 5px'}"
  >
    <div class="home-book-title">{{ title }}</div>
    <div class="home-book-inner">
      <div class="book-row" v-for="(row,rowIndex) in bookData" :key="rowIndex">
        <div class="book-col"
             v-for="(bookItem,bookIndex) in row"
             :key="bookIndex"
             :style="{ width: 100 / col + '%'}"
             :class="mode==='category'?'category-col':'book-col'"
             @click="onBookClick(bookItem)"
        >
          <!--为你推荐-->
          <div class="home-book-item"
                v-if="mode===Row||mode===Col"
               :class="mode===Col?'book-img':'row'"
          >
            <div
              :style="{height : height,width : width}"
              :class="mode===Row?'book-img':'row'"
            >
              <image-view :src="bookItem.cover" :mode="mode"></image-view>
            </div>

            <!--1行多列-->
            <div class="book-title" v-if="mode===Col">{{ bookItem.title }}</div>

            <!--2行2列-->
            <div class="book-title-wrapper" v-else>
              <div class="book-title">{{ bookItem.title }}</div>
              <div class="book-author">{{ bookItem.author }}</div>
              <div class="book-categoryText">{{ bookItem.categoryText }}</div>
            </div>
          </div>
          <!--分类-->
          <div class="category-item" v-else>
            <div class="category-title">{{ bookItem.text }}</div>
            <div class="category-num">{{ bookItem.num }}本书</div>
            <div class="category-img1">
              <image-view :src="bookItem.cover"></image-view>
            </div>
            <div class="category-img2">
              <image-view :src="bookItem.cover2"></image-view>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="home-book-btn" @click="onMoreClick" v-if="!(row > 4)">{{ btnText }}</div>

  </div>
</template>

<script>
  import {homeBookMode,category} from '../../utils/const';
  import ImageView from '../base/ImageView.vue';
  import {get} from '../../utils/request';
  export default {
    name: "HomeBook",
    data() {
      return {};
    },
    props: {
      title: String,
      data: {
        type: Array,
        default: [],
      },
      btnText: String,
      row: {
        type: Number,
        default: 0,
      },
      col: {
        type: Number,
        default: 1,
      },
      mode: {
        type: String,
        default: homeBookMode.Row,
      },
      showTitle: {
        type: Boolean,
        default: true,
      },
      showBtn: {
        type: Boolean,
        default: true,
      },
      linearBg: {
        type: Boolean,
        default: false,
      },
      height : {
        type : String,
        default : '',
      },
      width : {
        type : String,
        default : '',
      },
    },
    mounted() {
    },
    computed: {
      bookData() {
        const {row, col, data} = this;//2,3
        if (data && data.length > 0) {
          //转中文
          data.forEach(item=>{
            item.text = category[item.categoryText.toLowerCase()];
          });
          const totaleNum = row * col; //总条数 6
          const _bookData = data.slice(0, totaleNum);//[{},{},{}...]; 6
          const _bookDataRow = [];//[]
          let _row = 0;//0
          while (_row < row) {//0<3
            //0*3,0*3+3 = 0,3
            _bookDataRow.push(_bookData.slice(_row * col, _row * col + col));
            _row++;
          }
          return _bookDataRow;
        } else {
          return [];
        }
      },
      Row(){
        return homeBookMode.Row;
      },
      Col(){
        return homeBookMode.Col;
      },
    },

    methods: {
      onMoreClick() { //父组件的点击更多按钮事件
        this.$emit('onMoreClick');
      },
      onBookClick(item) { //父组件的图书点击事件
        this.$emit('onBookClick',item);
      },
    },
    components: {
      ImageView,
    }
  }
</script>

<style lang="less" scoped>
  .home-book {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /*margin: 23px 5px 0 5px;*/
    background-image: linear-gradient(-180deg, #FFFFFF 0%, #F9F9F9 100%);
    border: 1px solid #ccc;
    .home-book-title {
      margin-bottom: 22.5px;
      font-size: 21px;
      color: #212933;
    }
    .home-book-inner {
      margin: 0 -9px;
      .book-row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .book-col {
          box-sizing: border-box;
          margin-bottom: 12px;
          /*为你推荐*/
          .home-book-item {
            padding: 0 9.5px;
            width: 100%;
            margin-bottom: 12px;
            box-sizing: border-box;
            .book-img {
              width: 64px;
              height: 88px;
            }
            .book-title {
              overflow: hidden;
              text-overflow: ellipsis;
              max-height: 35.5px;
              margin-top: 9.5px;
              color: #212731;
              font-size: 12px;
            }
            .book-title-wrapper{
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding: 6px 0;
              margin-left: 9px;
              width: 80px;
              .book-title{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 0;
                font-size: 14px;
                color: #1F1F1F;
              }
              .book-author,.book-categoryText{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 12px;
                color: #868686;
              }
              .book-author{
                margin-bottom: -25px;
              }
            }
          }
          .row{
            display: flex;
            justify-content: space-between;
          }
          /*分类*/
          .category-item{
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 13px 0 0 16px;
            box-sizing: border-box;
            width:100%;
            height: 96px;
            background: #F8F9FB;
            border-radius: 10px;
            .category-title{
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 16px;
              color: #212832;
            }
            .category-num{
              margin-bottom: 14.5px;
              font-size: 12px;
              color: #868686;
            }
            .category-img1,.category-img2{
              position: absolute;
              right: 0;
              bottom: 0;
            }
            .category-img1{
              width: 48px;
              height: 60px;
              z-index: 10;
            }
            .category-img2{
              width: 36px;
              height: 50px;
              right: 30px;
              z-index: 9;
            }
          }
        }
        .category-col{
          padding: 0 9px;
        }
      }
    }
    .home-book-btn {
      margin-bottom: 20px;
      height: 41px;
      line-height: 41px;
      background: #FFFFFF;
      border: 1px solid #EDEEEE;
      border-radius: 44px;
      color: #3696EF;
      font-size: 14px;
      text-align: center;
    }
  }
</style>
